<template>
  <div class="content">
    <div class="info-list">
      <h6 class="padding-all txt-info">请输入发票冲红原因</h6>
      <ul class="mainBack">
        <li>
          <label>冲红原因</label>
          <input
            type="text"
            placeholder="请输入"
            class="col-1 txt-align-r"
            v-model="reason"
          />
        </li>
      </ul>
    </div>
    <div class="btn-margin whitespace">
      <button
        :class="
          reason != ''
            ? 'mint-button mint-button--danger mint-button--large is-plain'
            : 'mint-button mint-button--default mint-button--large'
        "

        @click="dj"
      >
        <label class="mint-button-text" >确定</label>
      </button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PunchingRedView",
  data() {
    return {
      reason: "",
      invoiceParams: null
    };
  },
  methods: {
    getList() {
      const params = this.$route.query.params;
      if (params) {
        try {
          this.invoiceParams = JSON.parse(params);
        } catch (error) {
          console.error('参数解析失败:', error);
        }
      }
    },

    async dj() {
      if (!this.reason) {
        this.$message({
          message: "请输入冲红原因",
          type: "error",
          duration: 3000
        });
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '处理中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      try {
        // 合并所有参数，保持原有参数结构
        const submitData = {
          ...this.invoiceParams,
          reason: this.reason // 用户输入的具体原因，可能用于其他用途
        };

        const res = await this.$apiClient({
          method: "post",
          url: "/invoice/cancleReceipt",
          data: submitData
        });

        if (res.data.data.returnCode === "90000") {
          this.$router.push({ path: "/SuccessView" });
        } else {
          throw new Error(res.data.data.msg || '冲红失败');
        }
      } catch (error) {
        this.$message({
          message: "发票冲红失败：" + (error.message || "未知错误"),
          type: "error",
          duration: 3000
        });
      } finally {
        loading.close();
      }
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style  scoped>
a, abbr, audio, b, body, button, canvas, dd, div, dl, dt, em, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, label, li, mark, menu, nav, ol, option, p, ruby, s, section, select, span, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, video {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font: inherit;
    font-family: \\65B9\6B63\5170\4EAD\9ED1\7B80\4F53,PingFang,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif;
}
.content {
    overflow: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    background: #f8f8f8;
    font-size: 3.9vw;
}

.info-list {
    width: 100vw;
}
.padding-all {
    padding: 2.5vw;
}
.txt-info {
    color: #999;
    text-align: left;
    font-size: 3vw;
}
.txt-tips, h6 {
    font-size: 4.2vw;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}
.mainBack {
    background: #fff;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.info-list ul li {
    padding: 2.5vw 0;
    margin: 0 1vw;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    display: -webkit-box;
    overflow: hidden;
}
.info-list ul li label {
    display: block;
    min-width: 2rem;
    padding: 2vw 0;
    margin: 0 2vw;
}
.info-list ul li input[type=text] {
    display: block;
    -webkit-box-flex: 1;
}
.info-list ul li input {
    border: none;
}
.txt-align-r {
    text-align: right;
}
.col-1 {
    -webkit-box-flex: 1;
    padding: 2vw 0;
    margin: 0 2vw;
}
button, input, textarea {
    color: inherit;
    font: inherit;
}
input, select, textarea {
    outline: 0;
}
.btn-margin {
    margin: 6vw 0;
}
.whitespace, .whitespace-left, .whitespace-right {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.whitespace, .whitespace-left {
    padding-left: 4vw;
}
.whitespace {
    padding-right: 4vw;
}
.mint-button--danger.is-plain {
    border: 1px solid #c9161e;
    color: #c9161e;
    background-color: #fff;
}
.mint-button--default {
    color: #fff;
    background-color: #ccc;
}
.mint-button {
    border-radius: 5vw;
    height: .6rem;
    display: block;
    font-size: 3.9vw;
}
.mint-button--large {
    display: block;
    width: 100%;
}
.mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5vw;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 3.9vw;
    height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
button, input, textarea {
    color: inherit;
    font: inherit;
}
</style>
